<template>
  <div id="table_container">
    <el-card style="margin-bottom: 5px; text-align: left">
      <el-input v-model="keyWord" placeholder="输入搜索内容" style="width: 200px;" @keyup.enter.native="handleFilter"></el-input>
      <el-select v-model="status" placeholder="状态" style="width: 90px;margin-left: 10px;">
        <el-option v-for="item in importanceOptions" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="handleFilter()" style="margin-left: 10px;">
        查询
      </el-button>
      <el-button v-permission="['menu:add']" class="create_btn" style="float: right;" type="primary" icon="el-icon-edit" @click="handleCreate">
        新增
      </el-button>
    </el-card>
    <el-card>
      <el-table
          :data="tableData"
          v-loading="loading"
          row-key="id"
          border
          lazy
          :load="load"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
            type="index"
            label="序号"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column
            prop="title"
            width="200"
            label="菜单名称">
        </el-table-column>
        <el-table-column
            prop="icon"
            width="60"
            align="center"
            label="图标">
          <template slot-scope="scope">
            <el-tag disable-transitions v-if="scope.row.icon">
              <i :class="scope.row.icon"></i>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="path"
            label="组件路径">
        </el-table-column>
        <el-table-column
            prop="permission"
            label="权限标识">
        </el-table-column>
        <el-table-column
            prop="sort"
            label="排序"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column
            prop="is_link"
            width='65'
            align="center"
            label="外链接">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.is_link === true ? 'success' :'danger' "
                disable-transitions>{{ scope.row.isLink_label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="hidden"
            label="侧边隐藏"
            align="center"
            width="80">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.hidden === true ? 'success' :'danger' "
                disable-transitions>{{ scope.row.hidden_label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            align="center"
            width="70">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.status === true ? 'success' :'danger' "
                disable-transitions>{{ scope.row.status_label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            width="180"
            label="操作">
          <template slot-scope="scope">
            <el-button v-permission="['menu:edit']" @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit">编辑</el-button>
            <el-button v-permission="['menu:delete']" @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>

    <el-dialog title="新建" top="10vh" width="500px" @close="handleClose" :visible.sync="createDialogFormVisible">
      <el-form :model="form" label-width="80px" style="text-align: left;">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="菜单类型">
              <el-radio-group @input="radioChage" v-model="form.menu_type">
                <el-radio-button :label="0">目录</el-radio-button>
                <el-radio-button :label="1">菜单</el-radio-button>
                <el-radio-button :label="2">按钮</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="菜单名称">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序">
              <el-input-number v-model="form.sort" style="width: 100%" :min="1"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="form.menu_type!==2">
          <el-col :span="24">
            <el-form-item label="图标">
              <el-popover ref="iconPopover" placement="bottom" width="380">
                <el-input slot="reference" readonly v-model="form.icon" autocomplete="off" placeholder="点击选择图标">
                  <el-button slot="append" icon="el-icon-s-grid" ref="iconButton"></el-button>
                </el-input>
                <div class="iconList">
                  <el-button
                      @click="checkIcon('el-icon-'+item)"
                      class="iconButton"
                      :title="'el-icon-'+item"
                      :icon="'el-icon-'+item"
                      v-for="item in elementIcons">
                  </el-button>
                </div>
              </el-popover>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" v-if="form.menu_type!==0">
            <el-form-item label="上级菜单">
              <el-select v-model="form.parent" clearable placeholder="请选择">
                <el-option
                    v-for="item in menuOptions"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menu_type!==2">
            <el-form-item label="组件路径">
              <el-input placeholder="请输入内容" v-model="form.component" autocomplete="off">
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20" v-if="form.menu_type!==0 && form.menu_type!==2">
          <el-col :span="12">
            <el-form-item label="路由名称">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路由地址">
              <el-input v-model="form.path" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="form.menu_type!==0">
          <el-col :span="12">
            <el-form-item label="权限字符">
              <el-input v-model="form.permission" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menu_type===2">
            <el-form-item label="接口地址">
              <el-select v-model="form.api" clearable placeholder="请选择" style="width: 100%">
                <el-option
                    v-for="item in apiOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="form.menu_type!==2">
          <el-col :span="12">
            <el-form-item label="是否外链" style="text-align: center">
              <el-radio-group v-model="form.is_link">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menu_type!==0 && form.menu_type!==2">
            <el-form-item label="侧边显示" style="text-align: center">
              <el-radio-group v-model="form.hidden">
                <el-radio :label="false">是</el-radio>
                <el-radio :label="true">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="状态" style="text-align: center">
              <el-radio-group v-model="form.status">
                <el-radio :label="true">启用</el-radio>
                <el-radio :label="false">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>


        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 8}"
                  placeholder="请输入内容"
                  v-model="form.description">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCreate">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑" top="10vh" width="500px" @close="handleClose" :visible.sync="editDialogFormVisible">
      <el-form :model="form" label-width="80px" style="text-align: left;">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="菜单类型">
              <el-radio-group @input="radioChage" v-model="form.menu_type">
                <el-radio-button :label="0">目录</el-radio-button>
                <el-radio-button :label="1">菜单</el-radio-button>
                <el-radio-button :label="2">按钮</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="菜单名称">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序">
              <el-input-number v-model="form.sort" style="width: 100%" :min="1"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="form.menu_type!==2">
          <el-col :span="24">
            <el-form-item label="图标">
              <el-popover ref="iconPopover" placement="bottom" width="380">
                <el-input slot="reference" readonly v-model="form.icon" autocomplete="off" placeholder="点击选择图标">
                  <el-button slot="append" icon="el-icon-s-grid" ref="iconButton"></el-button>
                </el-input>
                <div class="iconList">
                  <el-button
                      @click="checkIcon('el-icon-'+item)"
                      class="iconButton"
                      :title="'el-icon-'+item"
                      :icon="'el-icon-'+item"
                      v-for="item in elementIcons">
                  </el-button>
                </div>
              </el-popover>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" v-if="form.menu_type!==0">
            <el-form-item label="上级菜单">
              <el-select v-model="form.parent" clearable placeholder="请选择">
                <el-option
                    v-for="item in menuOptions"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menu_type!==2">
            <el-form-item label="组件路径">
              <el-input placeholder="请输入内容" v-model="form.component" autocomplete="off">
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20" v-if="form.menu_type!==0 && form.menu_type!==2">
          <el-col :span="12">
            <el-form-item label="路由名称">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路由地址">
              <el-input v-model="form.path" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="form.menu_type!==0">
          <el-col :span="12">
            <el-form-item label="权限字符">
              <el-input v-model="form.permission" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menu_type===2">
            <el-form-item label="接口地址">
              <el-select v-model="form.api" clearable placeholder="请选择" style="width: 100%">
                <el-option
                    v-for="item in apiOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="form.menu_type!==2">
          <el-col :span="12">
            <el-form-item label="是否外链" style="text-align: center">
              <el-radio-group v-model="form.is_link">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menu_type!==0 && form.menu_type!==2">
            <el-form-item label="侧边显示" style="text-align: center">
              <el-radio-group v-model="form.hidden">
                <el-radio :label="false">是</el-radio>
                <el-radio :label="true">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="状态" style="text-align: center">
              <el-radio-group v-model="form.status">
                <el-radio :label="true">启用</el-radio>
                <el-radio :label="false">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>


        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 8}"
                  placeholder="请输入内容"
                  v-model="form.description">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createMenu, deleteMenu, getApiList, getMenuLazy, getMenuOptions, updateMenu} from "@/api";
import elementIcons from "@/assets/js/icons";

export default {
  name: "index",
  data() {
    return {
      loading: true,
      tableData: [],
      createDialogFormVisible: false,
      showDialogFormVisible: false,
      editDialogFormVisible: false,
      form: {
        name: undefined,
        title: undefined,
        path: undefined,
        component: undefined,
        icon: undefined,
        sort: 1,
        description: undefined,
        is_catalog: false,
        status: true,
        hidden: false,
        parent: undefined,
        menu_type: 0,
        is_link: false,
        permission: undefined,
        api: undefined,
      },
      formLabelWidth: '80px',
      keyWord: undefined,
      importanceOptions: [{label: '启用', value: 1}, {label: '停用', value: 0}],
      status: undefined,

      menuOptions: [],
      elementIcons,
      apiOptions: [],

      treeNodeMap: new Map(),
      pid:undefined,
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    load(tree, treeNode, resolve) {
      this.pid = tree.id
      // 加载子节点时，对子节点进行赋值
      this.treeNodeMap.set(tree.id, {tree, treeNode, resolve});

      getMenuLazy({parentId: tree.id}).then(res => {
        resolve(res.data)
      }).catch(error => {
        console.log('获取子菜单失败！', error)
      })
    },
    getDataList() {
      getMenuLazy().then(res => {
        this.tableData = res.data
        setTimeout(() => {
          this.loading = false
        }, 1.5 * 500);
      })
    },
    handleClose() {
      this.form = {
        name: undefined,
        title: undefined,
        path: undefined,
        component: undefined,
        icon: undefined,
        sort: 1,
        description: undefined,
        is_catalog: false,
        status: true,
        hidden: false,
        parent: undefined,
        menu_type: 0,
        is_link: false,
        permission: undefined,
        api: undefined,
      }
    },
    handleClick(row) {
      console.log(row);
    },
    handleFilter() {
      this.getDataList()
    },
    handleCreate() {
      this.createDialogFormVisible = true
      // this.loadDialogOptions()
    },
    handleDetail(row) {
      this.showDialogFormVisible = true
      // this.loadDialogOptions()
      this.form = {...row}
    },
    handleEdit(row) {
      this.editDialogFormVisible = true
      this.loadDialogOptions({menuType: row.type})
      this.form = {...row}
    },
    handleChange(row) {
      this.$router.push({name: 'menuButton', params: {menuId: row.id}})
    },
    handleDelete(row) {
      deleteMenu(row.id).then(res => {
        this.$message.success('删除成功！');
        this.$router.go(0)
      })

    },
    refreshData() {
      // 获取节点
      const node = this.treeNodeMap.get(this.pid);
      // 获取需要刷新节点
      const {tree, treeNode, resolve} = node
      // 重新加载子节点数据
      this.load(tree, treeNode, resolve);
    },
    submitCreate() {
      let data = this.form
      createMenu(data).then(res => {
        this.$message.success('新建成功！')
        this.createDialogFormVisible = false
        // this.$router.go(0)
        this.refreshData()
      })
    },
    submitUpdate() {
      let data = this.form
      updateMenu(data).then(res => {
        this.$message.success('修改成功！')
        this.editDialogFormVisible = false
        // this.$router.go(0)
        this.refreshData()
      })
    },
    loadDialogOptions(params) {
      getMenuOptions(params).then(res => {
        this.menuOptions = res.data
      })
      getApiList().then(res => {
        const data = Object.keys(res.data.paths)
        const itmes = [];
        for (const item of data) {
          itmes.push({
            label: item,
            value: item
          });
        }
        this.apiOptions = itmes
      })
    },
    radioChage(value) {
      if (value > 0) {
        this.loadDialogOptions({menuType: value - 1})
      }
    },
    checkIcon(iconName) {
      this.form.icon = iconName;
      this.$nextTick(() => {
        this.$refs.iconButton.icon = iconName;
      })
      this.$refs.iconPopover.doClose()
    },


  },
}
</script>

<style scoped>
.iconList {
  width: 100%;
  height: 270px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow-y: scroll;
}

.iconButton {
  margin: 3px;
  font-size: 18px;
}
</style>